<template>
	<view class="content">
		<image src="/static/logo.png" class="logo"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<view>{{ number + 1}}</view>
			<view>{{ok ? 'YES' :'NO'}}</view>
			<view>{{ massage }}</view>
		</view>
		<view v-for="item in arr" style="color:aqua;">
			{{item}}
		</view>
		<view v-for="(item,index) in 6" style="color:blue">
			<view>{{index}}</view>
		</view>
		<view v-for="(item,index) in 4" style="color:cadetblue">
			<view :class="'list-' +index%2">{{index%2}}</view>
		</view>
		<view v-for="(value,name,index) in Object">
			{{index}}-----{{name}}-----{{value}}
		</view>
		<view v-for="item in arr" :key="item.id">
			<view style="color: aquamarine;">
				{{item.id}}:{{item.name}}
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'hello',
				number: 1,
				ok: true,
				message: 'htllo vue!',
				arr:[
					{id: 1,name:'uni-app'},
					{id: 2,name:'HTML'},
					{id: 3,name:'ABC'},
					{id: 4,name:'HELLO'},
				],
				Object:[
					{
					title:'how to do lists in Vue',
					author:'jane Doe',
					publishedAt:'2025-9-30'
				},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
</style>